
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Gamez Bootstarp</title>
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <!-- Custom Theme files -->
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/css/styleGame.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/css/popuo-box.css}" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <script type="text/javascript" th:src="@{/js/jquery.mixitup.min.js}"></script>
</head>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a th:href="@{/nav/index}"><img th:src="@{/images/logo.png}" alt=""></a>
		</div>
		<span class="menu"></span>
		<div class="navigation">
            <ul class="navig cl-effect-3" >
                <li><a th:href="@{/nav/index}">Home</a></li>
                <li><a th:href="@{/nav/games}">Games</a></li>
                <li><a th:href="@{/nav/blog}">Blog</a></li>
                <li><a th:href="@{/nav/features}">Features</a></li>
                <li><a th:href="@{/nav/contact}">Contact</a></li>
            </ul>
			<div class="search-bar">
					<input type="text" placeholder="search" required=""  value="search"/>
					<input type="submit" value="" />
			</div>
			<script>
				$( "span.menu" ).click(function() {
				  $( ".navigation" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- Header Ends Here -->
<!-- Games Page Starts here -->
<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a th:href="@{/nav/index}">Home</a></li>&nbsp;&nbsp;/&nbsp;&nbsp;
				<li class="act">Contact</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="contact">
			<h3 class="page-header">Cotntact Us</h3>
			<div class="map">
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12071.681938475434!2d-93.25993179999999!3d40.851669550000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87e9175fdc81fa0f%3A0x3e508b796d85b60e!2sNew+York%2C+IA+50238%2C+USA!5e0!3m2!1sen!2sin!4v1418810233989"  frameborder="0" style="border:0"></iframe>
			</div>
			<div class="contact-box">
				<div class="text">
					<input type="text" placeholder="Name" required="" />
					<input type="text" placeholder="Subject" required=""/>
					<input type="text" placeholder="Email" required=""/>
				</div>
				<div class="text">
					<textarea placeholder="Message" required=""></textarea>
				</div>
				<div class="text-but">
					<input type="submit" value="submit" />
				</div>
			</div>
			<div class="address-box">
				<h3 class="page-header">Address</h3>
				<h4>It is a long established fact that a reader will be distracted</h4>
				<p>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
				<p>Lorem Ipsum is that it has a more-or-less normal distribution of letters,that it has a more-or-less normal distribution as opposed to using 'Content here, content here',</p>
				<a href="mailto:example@email.com">123example@email.com</a>
				<p>+001 111 9999 99</p>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- Footer Starts Here -->
<div class="footer">
	<div class="container">
		<ul class="social">
			<li><i class="fa"></i></li>
			<li><i class="fb"></i></li>
			<li><i class="fc"></i></li>
		</ul>
        <!---->
	</div>
	
</div>
<!-- Footer Ends Here -->
</body>
</html>